<template>
  <view>
    <!-- 搜索框模块 -->
    <ugo-search></ugo-search>
    <!-- 轮播图模块 -->
     <swiper	indicator-dots 	autoplay 	circular class="swipers">
          <swiper-item  v-for="item in swiperList" :key="item.goods_id">
            <navigator :url="item.navigator_url" :open-type="item.open_type" >
            <view class="swiper-item" >
              <image :src="item.image_src" mode="widthFix" class="images" />
            </view>
            </navigator>   
          </swiper-item>
      </swiper> 
    <!-- 入口导航模块 -->
    <!-- <view class="naviga">
      <navigator v-for="item in navList" :key="item.name" :url="item.navigator_url" :open-type="item.open_type">
        <image
          :src="item.image_src"
          mode="widthFix"
          class="image1"
        />
      </navigator>
    </view> -->
    <view class="naviga">
    <view v-for="item in navList" :key="item.name">
      <navigator v-if="item.navigator_url" :url="item.navigator_url" :open-type="item.open_type">
        <image :src="item.image_src"  mode="widthFix" class="image1" />
      </navigator>
      <image v-else :src="item.image_src" mode="widthFix" class="image1" />
    </view>
  </view> 
    <!-- 楼层模块 -->
    <view class="m-floor">
      <view class="floor" v-for="(item,index) in floorList" :key="index">
        <view class="floor-title">
          <image
            :src="item.floor_title.image_src"
            mode="widthFix"
          />
        </view>
        <view class="product-list">
          <navigator url="item.product_list[0].navigator_url" open-type="item.product_list[0].open_type"  hover-class="none">
            <image
              :src="item.product_list[0].image_src"
              mode="heightFix"
            />
          </navigator>
          <navigator v-for="product in item.product_list.slice(1)" :key="product.goods_id" url="product.navigator_url" open-type="product.open_type" hover-class="none">
            <image
            :src="product.image_src"
              mode="heightFix"
            />
          </navigator>
        </view>
      </view>
    </view>
  </view>
  
</template>

<script>
export default {
  data() {
    return {
      // 轮播图列表
      swiperList: [],
      // 入口导航列表
      navList: [],
      // 楼层列表
      floorList: [],
    };
  },
  onLoad() {
   // 轮播图发送请求调用
    this.getSwiper(),
   // 导航图发送请求调用 
    this.getNaviga(),
   // 楼层模块发送请求调用 
    this.getFloor()
  },
  methods: {
    // 轮播图发送请求
   async getSwiper(){
    const res = await uni.$u.http.request({
    url: '/home/swiperdata'
  });
  console.log(res.data);
   this.swiperList = res.data.message
    },
    // 导航图发送请求
    async getNaviga(){
      const res = await uni.$u.http.request({
    url: '/home/catitems'
  });
  console.log(res.data);
  this.navList = res.data.message
    },
    // 楼层模块发送请求
    async getFloor(){
      const res = await uni.$u.http.request({
    url: '/home/floordata'
  });
  console.log(res.data);
  this.floorList = res.data.message
    }
  },
};
</script>

<style lang="scss">
.swipers {
  width: 100%;
  height: 170px;
  .images {
    width: 100%;
  }
}
.naviga {
  display: flex;
  justify-content: space-around;
  padding: 15px 10px;
}
.image1 {
  width: 60px;
  height: 70px;
}
.floor-title {
    image {
      width: 750rpx;
    }
  }
  .product-list {
    navigator {
      float: left;
      margin-left: 12rpx;
      margin-bottom: 10rpx;
      image {
        height: 188rpx;
      }
      &:nth-child(1) {
        image {
          height: 386rpx;
        }
      }
    }
  }
</style>
